import React, { FC, memo, useState } from 'react';
import { AiOutlineEdit } from 'react-icons/all';
import MinerNameEditModal from '@/components/miner-name-edit/MinerNameEditModal';

interface IMinerNameEditProps {
  name: React.ReactNode;

  onClick?: (e: React.MouseEvent<Element>) => void;
}

const MinerNameEdit: FC<IMinerNameEditProps> = (props) => {
  const { name } = props;

  const handleEdit = (e: React.MouseEvent<Element>) => {
    e.stopPropagation();
    props.onClick && props.onClick(e);
  };
  return (
    <div>
      <div className={`flex ai-center`}>
        <span onClick={handleEdit}> {name}</span>
        <AiOutlineEdit
          onClick={handleEdit}
          style={{ fontSize: '16px', marginTop: '4px', cursor: 'pointer' }}
        />
      </div>
    </div>
  );
};

export default memo(MinerNameEdit);
